<template>
  <div class="packages">
    <div class="container">
      <!-- aside -->
      <div class="aside">
        <el-button type="primary" @click="addRole">添加角色</el-button>
        <el-input v-model="roleName" placeholder="请输入角色名称"></el-input>
        <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </div>
      <!-- main -->
      <div class="main">
        <!-- 一级树状表格 -->
        <div v-if="tableVisible">
          <div class="vp-title">
            <span style="font-size: 17px; font-weight: bold">广州华银医学检验中心有限公司-菜单角色列表</span>
          </div>
          <el-form style="margin-top: 10px" :inline="true">
            <el-form-item style="float: right">
              <el-button type="primary">选中删除</el-button>
            </el-form-item>
          </el-form>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column label="角色编码" width="120">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="角色名称" width="120"></el-table-column>
            <el-table-column prop="name" label="顺序号" width="120"></el-table-column>
            <el-table-column prop="address" label="备注" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="name" label="状态" width="120"></el-table-column>
            <el-table-column align="center" label="操作" width="120">
              <template slot-scope="scope">
                <div class="czDiv">
                  <span style="color:#0186ef;cursor:pointer">编辑</span>
                  <span style="color:red;cursor:pointer">删除</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 二级树状表格 -->
        <div v-if="!tableVisible">
          <div class="vp-title">
            <span style="font-size: 17px; font-weight: bold">菜单角色-人员列表</span>
          </div>
          <el-form style="margin-top: 10px" :inline="true">
            <el-form-item style="float: left">
              <el-button type="primary" @click="addRolePerson">添加角色人员</el-button>
            </el-form-item>
          </el-form>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column label="角色编码" width="120">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="name" label="职位" width="120"></el-table-column>
            <el-table-column prop="address" label="手机号码" align="center"></el-table-column>
            <el-table-column prop="address" label="所属组织" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column align="center" label="操作" width="120">
              <template slot-scope="scope">
                <div class="czDiv">
                  <span style="color:red;cursor:pointer">删除</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="display: flex; justify-content: flex-end; margin-top: 15px">
            <pagination
              v-show="listTotal > 0"
              :total="listTotal"
              :page.sync="listParams.current"
              :limit.sync="listParams.size"
              @pagination="getList"
            />
          </div>
        </div>
      </div>
      <!-- 新增弹窗 -->
      <el-dialog :visible.sync="dialogVisible" width="30%" style="margin-top:15vh">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="所属" prop="remark">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="顺序号" prop="remark">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 二级树状弹窗 -->
      <el-dialog :visible.sync="dialogVisible2" width="80%" style="margin-top:15vh">
        <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="添加角色人员" prop="name">
            <el-input placeholder="人员编码/姓名/手机号" style="width:200px"></el-input>
          </el-form-item>
          <!-- 表格布局 -->
          <div class="container">
            <div class="aside2">
              <el-table
            ref=""
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" ></el-table-column>
            <el-table-column type="index"  label="序号"></el-table-column>
            <el-table-column label="人员编码" >
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" ></el-table-column>
            <el-table-column prop="name" label="性别" ></el-table-column>
            <el-table-column prop="address" label="手机号码" align="center"></el-table-column>                    
          </el-table>
            </div>
            <div class="middle">33</div>
            <div class="main2">
              <el-table
            ref=""
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" ></el-table-column>
            <el-table-column type="index"  label="序号"></el-table-column>
            <el-table-column label="人员编码" >
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" ></el-table-column>
            <el-table-column prop="name" label="性别" ></el-table-column>
            <el-table-column prop="address" label="手机号码" align="center"></el-table-column>        
            <el-table-column align="center" label="操作" >
              <template slot-scope="scope">
                <div class="czDiv">
                  <span style="color:red;cursor:pointer">删除</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
            </div>
          </div>
          <el-form-item>
            <el-button @click="resetForm2">取消</el-button>
            <el-button type="primary" @click="submitForm2">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roleName: "",
      treeData: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1"
              // children: [
              //   {
              //     label: "三级 1-1-1"
              //   }
              // ]
            }
          ]
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1"
            },
            {
              label: "二级 2-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
       
      ],
      multipleSelection: [],
      dialogVisible: false,
      dialogVisible2: false,
      ruleForm: {
        name: "",
        remark: ""
      },
      rules: {
        name: [{ required: true, Message: "请输入名称", trigger: "blur" }]
      },
      tableVisible: true,
      listTotal: 0,
      listParams: {
        current: 1,
        size: 10
      }
    };
  },
  methods: {
    // 树状
    handleNodeClick(data) {
      console.log(data);
      if (data.children) {
        this.tableVisible = true;
      } else {
        this.tableVisible = false;
      }
    },
    // 表格复选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    addRole() {
      this.dialogVisible = true;
    },
    addRolePerson() {
      this.dialogVisible2 = true;
    },
    // 新增弹窗保存
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields(); //清空
      this.dialogVisible = false;
    },
    // 新增人员弹窗保存
    submitForm2(){
      this.$Message.success('保存成功')
      this.dialogVisible2=false
    },
    resetForm2(){
      this.dialogVisible2=false
    },
    
  }
};
</script>

<style scoped lang="scss">
.packages {
  position: relative;
  padding: 10px;
  margin-top: 10px;
  background-color: #fff;
  .container {
    border: 1px solid rgb(220, 223, 230);
    border-radius: 4px;
    display: flex;
  }
  .aside {
    width: 450px;
    border-right: 1px solid rgb(220, 223, 230);
    padding: 15px;
    box-sizing: border-box;
  }
  .main {
    padding: 15px;
    flex: 1;
  }
  .aside2 {
    width:45%;
    border-right: 1px solid rgb(220, 223, 230);
    padding: 15px;
    box-sizing: border-box;
  }
  .main2 {
    padding: 15px;
    flex: 1;
    border-left: 1px solid rgb(220, 223, 230);
    box-sizing: border-box;
  }
  .middle{
    border: none;
    // line-height: 200%;
  }
  .el-input,
  .el-tree,
  .el-button,
  .el-form-item {
    margin: 5px;
  }
  .vp-title {
    color: #333;
    height: 35px;
    border-bottom: 1px solid #eff1f3;
  }
  .czDiv {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
  }
  .demo-ruleForm {
    .el-form-item {
      margin-bottom: 15px;
    }
  }
}
</style>
